user<template>
  <h1>我是产品列表</h1>

  <el-table :data="productList" style="width: 100%">
    <el-table-column prop="id" label="主键" width="80" />
    <el-table-column prop="name" label="标题"  />
    <el-table-column prop="createTime" label="创建时间" width="180"/>
  </el-table>

  <table>
    <thead>
    <tr>
      <th>id</th>
      <th>标题</th>
      <th>价格</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(product,index) in productList" :key="product.id">
      <td>{{ product.id }}</td>
      <td>{{ product.name }}</td>
      <td><a href="" @click.prevent="getProduct(index)">查询产品明细</a></td>
    </tr>
    </tbody>
  </table>
</template>

<script>

import productService from '@/services/ProductService'

export default {
  name: "index.vue",
  components:{
  },
  data() {
    return {
      productList: [],
      keyword: "",
      total: 0,
      pageNo: 1,
      pageSize: 15,
      pages: 0
    }
  },

  created() {
  // 初始化调用，去执行异步查询产品信息
    this.loadProduct();
  },
  methods: {
    // 产品查询
    loadProduct() {
      productService.loadProduct().then(res=>{
        console.log(res)
        if (res.status == 200) {
          const {total, pages, current, size, records} = res.data;
          this.productList = records;
          this.total = total;
          this.pageNo = current;
          this.pageSize = size;
          this.pages = pages;
        }
      }).catch(err=>{
        console.log(err);
      });

    },

    getProduct(index) {

      const pid = this.productList[index].id;
      productService.getProduct(pid).then(res=>{
        console.log(res);
      }).catch(err=>{
        console.log(err);
      });

    }
  }

}
</script>

<style scoped>

</style>
